<template lang="">
  <div>
    <div class="header">
      <h1>新型冠状肺炎实时监测</h1>
      <div class="time">{{nowtime |formTime}}</div>
    </div>

    <!-- 主体部分 -->
    <div class="main">
      <div class="left">
        <div class="panel">
          <dv-border-box-7 :color="['#052648','#02a6b5']">
            <!-- 左侧柱状图 -->
              <BarOne />
          </dv-border-box-7>
          <dv-border-box-7 :color="['#052648','#02a6b5']">
            <!-- 左侧折线图 -->
            <LineOne />
          </dv-border-box-7>
            
          <dv-border-box-7 :color="['#052648','#02a6b5']">
            <!-- 右侧饼图 -->
            <PieOne />
          </dv-border-box-7>
          
        </div>
 
      </div>


      <div class="middle">   
        <div class="middle_top">
          <Num />
        </div>
        <!-- 地图 -->
        <div class="middle_main">
          
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <MapVue />
        </div>
      </div>

      <div class="right">
        <div class="panel">
          <dv-border-box-7 :color="['#052648','#02a6b5']">
            <!-- 柱状图 -->
          <BarTwo />
          </dv-border-box-7>
          <dv-border-box-7 :color="['#052648','#02a6b5']">
            <!-- 面积图 -->
            <LineTwo />
          </dv-border-box-7>
            
          <dv-border-box-7 :color="['#052648','#02a6b5']">
            <PieTwo />
          </dv-border-box-7>
          
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import BarOne from "@/components/BarOne.vue";
import BarTwo from "@/components/BarTwo.vue";
import LineOne from "@/components/LineOne.vue";
import LineTwo from "@/components/LineTwo.vue";
import MapVue from "@/components/MapVue.vue";
import PieOne from "@/components/PieOne.vue";
import PieTwo from "@/components/PieTwo.vue";
import Num from "@/components/Num.vue";
export default {
  name: "Home",
  components: { BarOne, BarTwo, LineOne, LineTwo, MapVue, PieOne, PieTwo, Num },
  data() {
    return {
      nowtime: new Date()
    }
  },
  mounted() {
    setInterval(() => {
      this.nowtime = new Date()

    }, 1000);


  },

}
</script>
<style lang="less">
.header {
  position: relative;
  min-width: 1024x;
  margin: 0 auto;
  height: 85px;
  background: url("@/assets/img/head.png");
  background-size: 100% 100%;
  text-align: center;


}

// div{
//   // 1rem  font-size:16px 
//   // 2rem   32px
//   //3rem   48px
//   width:2rem;
// }


// div{
//   // width:250px;   
//   width: 3.125rem;
// }


.time {
  position: absolute;
  right: 20px;
  bottom: 30px;
}

// 主体部分样式
.main {
  display: flex;
  justify-content: space-between;
  min-width: 1024x;
  margin: 0 auto;
  min-width: 1024px;
  max-width: 1920px;

  .middle {
    height: 600px;
    width: 600px;
    // background: yellow;

    .middle_top {
      height: 120px;

    }

    .middle_main {
      height: 500px;
      // background: yellowgreen;
      position: relative;



      .map1 {
        width: 400px;
        height: 400px;
        // border: 1px solid #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        // transform: translate(-50%, -50%);
        background: url("@/assets/img/jt.png");
        background-size: 100% 100%;
        animation: rotate1 15s infinite linear;

      }

      //背景地图样式
      .map2 {
        position: absolute;
        width: 350px;
        height: 350px;
        // border:1px solid red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url("@/assets/img/map.png");
        background-size: 100%;
        animation: rotate2 linear 15s infinite; //使用动画
        opacity: 0.5;


      }

      .map3 {
        position: absolute;
        width: 430px;
        height: 430px;
        // border:1px solid white;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url("@/assets/img/lbx.png");
        background-size: 100%;
        animation: rotate2 linear 15s infinite; //使用动画
        opacity: 0.4;

      }


      // 箭头旋转
      @keyframes rotate1 {
        from {
          transform: translate(-50%, -50%) rotate(360deg);
        }

        to {
          transform: translate(-50%, -50%) rotate(0deg);
        }
      }

      // 地球旋转
      @keyframes rotate2 {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }

        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
    }

  }

}

// 小盒子样式
.left {
  width: 400px;
  height: 600px;

  .panel {
    width: auto;
    height: 260px;
    margin: 10px;
  }
}

.dv-border-box-7 {
  margin-bottom: 10px;
}


.right {
  width: 400px;
  height: 600px;

  .panel {
    width: auto;
    height: 260px;
    margin: 10px;
  }
}

@media screen and (max-width:1024px) {
  html {
    font-size: 42px;
  }
}

@media screen and(min-width:1920px) {
  html {
    font-size: 80px;
  }
}
</style>